<template>
	<view class="zone">
		<view class="status_bar"></view>
		<Header title="个人信息"></Header>

		<view class="main">
			<view class="list">
				<!-- <view  class="item" @click="choose(1)">
					<text class="left">头像</text>
					<view class="right">
						<image class="header bora" :src="headerimg" mode="aspectFill" />
						<u-icon class="uicon" name="arrow-right" color="#000" size="16px"></u-icon>
					</view>
				</view> -->

				<!-- <view class="item">
					<text class="left">昵称</text>
					
					<view class="right">
						<text>{{data.myname?data.myname:'潮玩新人'}}</text>
						<u-icon class="uicon" name="arrow-right" color="#000" size="16px"></u-icon>
					</view>
				</view> -->

				<view class="item">
					<text class="left">手机号</text>
					<view class="right">
						<text>{{tel}}</text>
					</view>
				</view>

				<view class="item">
					<text class="left">ID号</text>
					<view class="right">
						<text>{{myinfo.invite_code}}</text>
					</view>
				</view>

				<!-- <view class="item" @click="sexshow = true">
					<text class="left">性别</text>
					<view class="right">
						<text>{{mysex==1?'男':'女'}}</text>
						<u-icon class="uicon" name="arrow-right" color="#000" size="16px"></u-icon>
					</view>
				</view>
				<view class="item" @click="showage=true">
					<text class="left">年龄</text>
					<view class="right">
						<text>{{data.age}}</text>
						<u-icon class="uicon" name="arrow-right" color="#000" size="16px"></u-icon>
					</view>
				</view> -->
				<view class="item" @click="wxshow = true">
					<text class="left">微信</text>
					<view class="right">
						<text>{{data.wx}}</text>
						<u-icon class="uicon" name="arrow-right" color="#000" size="16px"></u-icon>
					</view>
				</view>
				<view class="item" @click="showqq = true">
					<text class="left">QQ</text>
					<view class="right">
						<text>{{data.qq}}</text>
						<u-icon class="uicon" name="arrow-right" color="#000" size="16px"></u-icon>
					</view>
				</view>
				<view class="item" @click="choose(2)">
					<text class="left">群二维码</text>
					<view class="right">
						<image class="header" :src="qrimg" mode="" />
						<u-icon class="uicon" name="arrow-right" color="#000" size="16px"></u-icon>
					</view>
				</view>
				<view class="item" @click="showdesc = true">
					<text class="left">个人介绍</text>
					<view class="right">
						<text>{{data.introduce?data.introduce:'这个人很懒，暂时没有个人介绍～'}}</text>
						<u-icon class="uicon" name="arrow-right" color="#000" size="16px"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 选择性别 -->
		<u-select v-model="sexshow" :list="list" @confirm="confirm"></u-select>

		<!-- 微信 -->
		<u-mask :show="wxshow" :custom-style="{background: 'rgba(0, 0, 0, 0.75)'}">
			<view class="warp">
				<view class="maskbox">
					<view class="m_title">
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
						<text>我的微信</text>
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
					</view>
					<view class="m_content">
						<input type="text" maxlength="30" v-model="modeldata.wx">
					</view>
					<view class="btnbox">
						<!-- <view class="button quit" >取消</view> -->
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="button cancel" @click="wxsure">确认</u-button>
					</view>
				</view>
				<image class="closed" @click="wxshow = false" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix" />
			</view>
		</u-mask>


		<!-- qq -->
		<u-mask :show="showqq" :custom-style="{background: 'rgba(0, 0, 0, 0.75)'}">
			<view class="warp">
				<view class="maskbox">
					<view class="m_title">
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
						<text>我的QQ号</text>
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
					</view>
					<view class="m_content">
						<input type="number" maxlength="30" v-model="modeldata.qq">
					</view>
					<view class="btnbox">
						<!-- <view class="button quit">取消</view> -->
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="button cancel" @click="qqsure">确认</u-button>
					</view>
				</view>
				<image class="closed" @click="showqq = false" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix" />
			</view>
		</u-mask>

		<!-- 我的昵称 -->
		<u-mask :show="showname">
			<view class="warp">
				<view class="maskbox">
					<view class="m_title">
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
						<text>我的昵称</text>
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
					</view>
					<view class="m_content">
						<input type="text" v-model="modeldata.myname" maxlength="20">
					</view>
					<view class="btnbox">
						<!-- <view class="button quit"  >取消</view> -->
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="button cancel" @click="namesure">确认</u-button>
					</view>
				</view>
				<image class="closed" @click="showname = false" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix" />
			</view>
		</u-mask>

		<!-- 我的年龄 -->
		<u-mask :show="showage" :custom-style="{background: 'rgba(0, 0, 0, 0.75)'}">
			<view class="warp">
				<view class="maskbox">
					<view class="m_title">
						<text>我的年龄</text>
					</view>
					<view class="m_content">
						<input type="number" v-model="modeldata.age" maxlength="3">
					</view>
					<view class="btnbox">
						<!-- <view class="button quit" >取消</view> -->
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="button cancel" @click="agesure">确认</u-button>
					</view>
				</view>
				<image class="closed" @click="showage = false" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix" />
			</view>
		</u-mask>

		<!-- 个人介绍 -->
		<u-mask :show="showdesc" :custom-style="{background: 'rgba(0, 0, 0, 0.75)'}">
			<view class="warp">
				<view class="maskbox">
					<view class="m_title">
						<text>个人介绍</text>
					</view>
					<view class="m_content2">
						<u-input v-model="modeldata.introduce" type="textarea" :height="120" :auto-height="true" />
					</view>
					<view class="btnbox">
						<!-- <view class="button quit"  >取消</view> -->
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="button cancel" @click="descsure"> 确认</u-button>
					</view>
				</view>
				<image class="closed" @click="showdesc = false" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix" />
			</view>
		</u-mask>

	</view>
</template>

<script>
	import config from '@/common/config/index'
	export default {
		data() {
			return {
				imgurl: config.imgurl,
				headerimgurl: config.headerimgurl,
				background: {
					backgroundColor: '#0E0E0E',
				},
				wxshow: false,
				showqq: false,
				showname: false,
				myinfo: uni.getStorageSync('userinfo'),
				headerimg: '/static/login/logo.png',
				headerinfo: '', //用来保存上传图片的数据
				qrimg: '',
				qrinfo: '',
				sexshow: false, //列选择器
				showage: false,
				showdesc: false,
				list: [{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				mysex: 1,
				data: {
					age: 0,
					introduce: '',
					qq: '',
					wx: '',
					myname: '', //用来保存我的昵称的数据
				},
				modeldata: {
					age: '',
					introduce: '',
					qq: '',
					wx: '',
					myname: '', //用来保存我的昵称的数据
				},
				sureshow: false,
				tel: '',
			}
		},
		onLoad() {
			this.getUserInfo();
			this.getInfo()
		},
		methods: {
			// 请求用户信息接口
			async getUserInfo() {
				this.$getUserInfo.getUserInfo((res) => {
					this.myinfo = res.data
					let reg = /^(\d{3})\d{4}(\d{4})$/;
					this.tel = res.data.mobile.replace(reg, "$1****$2");
				})
			},

			// 获取个人
			async getInfo() {
				// type == 1时 为id请求  2 时为prop传参
				let res = await this.$http.index.getInfo({
					id: uni.getStorageSync('id')
				})
				this.data.qq = res.data.qq
				this.data.wx = res.data.wx
				this.data.age = res.data.age
				this.data.introduce = res.data.desc
				this.headerimg = res.data.pic ? this.headerimgurl + res.data.pic : '/static/login/logo.png';
				this.qrimg = res.data.qr_code ? this.headerimgurl + res.data.qr_code : '/static/self/code.png'
				this.data.myname = res.data.nickname
				this.mysex = res.data.sex
			},


			confirm(e) {
				// console.log(e);
				this.mysex = e[0].value
				let data = {
					sex: e[0].value
				}
				this.editInfo(data)
			},
			// 选择图片
			choose(type) {
				uni.chooseImage({
					count: 1,
					crop: {
						width: 200,
						height: 200
					},
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						if (type == 1) {
							this.headerimg = chooseImageRes.tempFiles[0].path
						} else if (type == 2) {
							this.qrimg = chooseImageRes.tempFiles[0].path
						}
						uni.uploadFile({
							url: 'http://chwmx.qxgm.site:85/home/index/uploadFile', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								// console.log(JSON.parse(uploadFileRes.data));
								let res = JSON.parse(uploadFileRes.data)
								if (res.code == 1) {
									if (type == 1) {
										this.headerinfo = res.info
										let data = {
											pic: this.headerinfo
										}
										this.editInfo(data)
									} else if (type == 2) {
										this.qrinfo = res.info
										let data = {
											qr_code: this.qrinfo
										}
										this.editInfo(data)
									}
								} else {
									this.$u.toast(res.msg)
								}
							},
						});
					}
				});
			},


			async editInfo(data) {
				// data =  {
				// 	nickname:this.data.myname,
				// 	wx:this.data.wx,
				// 	qq:this.data.qq,
				// 	pic:this.headerinfo?this.headerinfo:'',
				// 	age:this.data.age,
				// 	sex:this.mysex,
				// 	desc:this.data.introduce,
				// 	qr_code:this.qrinfo?this.qrinfo:'',
				// }
				let res = await this.$http.index.editInfo(data)
				this.$u.toast(res.msg)

				if (res.code == 1) {
					this.getInfo()
					this.sureshow = false
					this.showname = false
					this.showage = false
					this.wxshow = false
					this.showqq = false
					this.showdesc = false
				}
			},
			// 年龄确认
			agesure() {
				var reg = /^(?:0|[1-9][0-9]?|100)$/;
				if (reg.test(this.modeldata.age) && this.modeldata.age < 110 && this.modeldata.age >= 0) {
					let data = {
						age: this.modeldata.age
					}
					this.editInfo(data)
				} else {
					this.$u.toast('请输入正确的年龄')
				}
			},

			// qq确认
			qqsure() {

				if (this.modeldata.qq == '') {
					this.$u.toast('qq号不能为空')
				} else {
					let data = {
						qq: this.modeldata.qq
					}
					this.editInfo(data)
				}
			},
			// 昵称确认
			namesure() {
				const reg = /<script[^>]*>([\S\s]*?)<\/script>/gim;
				if (reg.test(this.modeldata.myname)) {
					this.$u.toast('存在特殊字符，请重新输入')
				} else {
					let data = {
						nickname: this.modeldata.myname
					}
					this.editInfo(data)
				}
			},
			// 微信确认
			wxsure() {
				if (this.modeldata.wx == '') {
					this.$u.toast('微信号不能为空')
				} else {
					let data = {
						wx: this.modeldata.wx
					}
					this.editInfo(data)
				}
			},
			// 个人介绍
			descsure() {
				const reg = /<script[^>]*>([\S\s]*?)<\/script>/gim;
				if (this.modeldata.introduce == '') {
					this.$u.toast('个人介绍不能为空')
				} else if (reg.test(this.modeldata.introduce)) {
					this.$u.toast('存在特殊字符，请重新输入')
				} else {
					let data = {
						desc: this.modeldata.introduce
					}
					this.editInfo(data)
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.main {
		padding: 10px 0px 10px 20px;
	}

	.item {
		background: #FFFFFF;
		padding: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
		min-height: 55px;
		border-bottom: 1px solid #D7E5F0;
		;


		.left {
			color: #131314;
			font-size: 13px;
			font-weight: 600;
		}

		.right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 60%;

			text {
				text-align: right;
				width: 80%;
				display: block;
				color: #696969;
				font-size: 13px;
				white-space: nowrap;
				/*不允许换行*/
				overflow: hidden;
				/*超出隐藏*/
				text-overflow: ellipsis;
				/*文本超出三点代替*/
			}
		}

		.header {
			width: 40px;
			height: 40px;
		}

		.bora {
			border-radius: 50%;
		}

		.arrow {
			width: 12px;
			margin-left: 10px;
		}

		.code {
			width: 30px;
		}
	}


	// 弹窗
	.warp {
		width: 90%;
		position: relative;
		left: 5%;
		top: 50%;
		transform: translateY(-50%);
	}

	.maskbox {
		background: linear-gradient(178deg, #FEEBCB 0%, #F5F2F4 46%, #DDF1F6 64%, #FECCFF 100%);
		border-radius: 19px;
		padding: 20px;
		display: flex;
		align-items: center;
		flex-direction: column;
	}


	.btnbox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.button {
			width: 50%;
			height: 40px;
		}
	}

	.m_content {
		width: 100%;
		background: #FFFFFF;
		border-radius: 6px;
		margin: 30px 0;
		padding: 5px;

		input {
			padding: 5px;
			text-align: center;
			color: 131314;
			font-size: 14px;
			color: #696969;
		}
	}

	.m_content2 {
		width: 100%;
		background: #FFFFFF;
		border-radius: 7px;
		margin: 30px 0;
		padding: 5px;

		input {
			padding: 5px;
			text-align: center;
			color: #696969;
			font-size: 14px;
		}
	}

	::v-deep .uni-textarea-textarea {
		color: #fff;
		font-size: 14px;
	}

	.quit {
		background: #434343;
		border-radius: 7px;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
	}

	.cancel {
		background: linear-gradient(360deg, #8BEAD1 0%, #70D7D3 100%);
		border-radius: 4px;
		color: #151515;
		font-size: 14px;
		font-weight: 600;
	}


	.maskbox2 {
		background: #FFFFFF;
		border-radius: 9px;
		padding: 20px 10px;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.m_content3 {
		width: 100%;
		font-size: 12px;
		font-weight: bold;
		color: #70390A;
		line-height: 20px;
		padding: 0 12px;
		margin: 20px;

		p {
			color: #AD7051;
			font-size: 14px;
			text-align: center;
			line-height: 20px;
		}
	}

	.red {
		color: #ff3f00 !important;
		font-size: 12px;
		font-weight: 600;
		margin-left: 5px;
	}

	::v-deep .nav-bar {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 60px;
		background: #FFFFFF;
		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.04);
	}

	.uicon {
		margin-left: 5px;
	}

	.m_title {
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			position: relative;
			color: #131314 !important;
			font-size: 16px;
			line-height: 20px;
			margin: 0 10px;
			font-weight: 600;
			z-index: 99;
		}

		text::before {
			content: '';
			position: absolute;
			left: 15%;
			top: 0;
			width: 30px;
			height: 100%;
			border-radius: 20%;
			background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
			z-index: -1;
		}

		image {
			width: 12px;
		}
	}


	.closed {
		position: absolute;
		width: 30px;
		bottom: -50px;
		left: calc(50% - 15px);
	}
</style>